@import 'src/mixins.less';

:root {
  --panel-size: 5.08rem;
  --gap: 0.12rem;
}

.panel {
  position: relative;
  width: var(--panel-size); /* 圆的总宽度 */
  height: var(--panel-size); /* 圆的总高度 */
  transform: rotate(45deg);
}

.quarter {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(50% - var(--gap) / 2); /* 每个四分之一圆的宽度 */
  height: calc(50% - var(--gap) / 2); /* 每个四分之一圆的高度 */
  background-color: white;
  overflow: hidden;

  :global(.smart-icon) {
    position: relative;
    color: #1a1a1a;
    z-index: 2;
  }

  &.touchable::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
}

.topLeft {
  top: 0;
  left: 0;
  border-top-left-radius: 100%;

  &.touchable::after {
    background: linear-gradient(135deg, var(--panel-theme-color) -20%, rgba(255, 255, 255, 0) 78%);
  }
}

.topRight {
  top: 0;
  right: 0;
  border-top-right-radius: 100%;

  &.touchable::after {
    background: linear-gradient(-135deg, var(--panel-theme-color) -20%, rgba(255, 255, 255, 0) 78%);
  }
}

.bottomLeft {
  bottom: 0;
  left: 0;
  border-bottom-left-radius: 100%;

  &.touchable::after {
    background: linear-gradient(45deg, var(--panel-theme-color) -20%, rgba(255, 255, 255, 0) 78%);
  }
}

.bottomRight {
  bottom: 0;
  right: 0;
  border-bottom-right-radius: 100%;

  &.touchable::after {
    background: linear-gradient(-45deg, var(--panel-theme-color) -20%, rgba(255, 255, 255, 0) 78%);
  }
}

.center {
  height: 40%;
  width: 40%;
  border-radius: 100%;
  background-color: #fafafa;
  border: var(--gap) solid #f2f4f6;
  z-index: 99;

  .transform-center();
}
